<template>
    <div>
        <Modal v-model="show" title="更新角色"
               :mask-closable="false" :closable="false">
            <Form ref="modalForm" :model="data"
                  :label-width="100" :rules="rules">
                <FormItem label="角色ID" prop="roleId">
                    <Input v-model.trim="data.roleId" placeholder="角色ID" disabled="disabled"/>
                </FormItem>
                <FormItem label="角色名" prop="roleName">
                    <Input v-model.trim="data.roleName" placeholder="角色名称"/>
                </FormItem>
                <FormItem label="角色描述" prop="roleDesc">
                    <Input v-model.trim="data.roleDesc" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                           placeholder="角色描述"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default" :disabled="loading" @click="cancel(false)">取消</Button>
                <Button type="primary" :loading="loading" @click="ok">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import {mapActions} from 'vuex';

    export default {
        data() {
            return {
                show: true,
                loading: false,
                data: {
                    roleId: 0,
                    roleName: '',
                    roleDesc: ''
                },
                rules: {
                    roleName: [
                        {required: true, message: '角色名不能为空', trigger: 'blur'},
                        {type: 'string', max: 10, message: '角色名输入错误,长度不能超过10位', trigger: 'blur'}
                    ],
                    roleDesc: [
                        {type: 'string', max: 150, message: '描述输入错误,长度不能超过150位', trigger: 'blur'}
                    ]
                }
            };
        },
        props: {
            roleId: {
                type: String,
                default: ''
            }
        },
        created() {
            this.getRoleInfo();
        },
        methods: {
            ...mapActions(['getRoleId', 'updateRole']),
            cancel(reload = false) {
                this.$emit('cancel', 'update', reload);
            },
            async getRoleInfo() {
                this.data.roleId = this.roleId;
                // 调用后台查询数据
                this.getRoleId({
                    roleId: this.roleId
                }).then(res => {
                    if (res.data) {
                        this.data.roleName = res.data.roleName;
                        this.data.roleDesc = res.data.roleDesc;
                    } else {
                        this.$Message.error(this.$t('queryDataFailed'));
                    }
                });
            },
            ok() {
                this.$refs['modalForm'].validate(valid => {
                    if (valid) {
                        this.update();
                    }
                });
            },
            async update() {
                // 调用后台接口更新数据
                this.updateRole({
                    roleId: this.data.roleId,
                    roleName: this.data.roleName,
                    roleDesc: this.data.roleDesc
                }).then(res => {
                    if (res.code === '0000') {
                        this.$Message.success('角色 ' + this.data.roleName + ' 更新成功');
                        this.cancel(true);
                        this.loading = false;
                    } else {
                        this.$Message.error(this.$t('updateDataFailed'));
                        this.loading = false;
                    }
                });
            }
        }
    };
</script>

